<!DOCTYPE html>
<html manifest="apple.manifest">
	<!--<html>-->

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/cookie.min.js"></script>
		<script src="./js/hc.min.js"></script>
		<title>苹果官方首页</title>
		<style type="text/css">
			body {
				background-color: #FAFAFA;
			}
			
			nav {
				background: #000000;
			}
			
			a {
				color: white;
			}
			
			.lis {
				/*margin-left: 25px;*/
			}
			
			.rows div {
				text-align: center;
				margin: 0 auto;
				background-color: #f9f0eb;
			}
			
			.rowss div {
				text-align: center;
				margin: 0 auto;
				background-color: #f9f0eb;
			}
			
			.rows div img {
				margin: 0 auto;
			}
			
			.rowss div img {
				margin: 0 auto;
			}
			
			p {
				font-size: 30px;
			}
			
			li {
				list-style: none;
			}
			
			.rowsss li {
				margin: 0 auto;
			}
			footer{
				height:350px;
				background-color: lightgray;
			}
			.rowsss dropdown{
				margin-top: 30px;
			} 
			@media screen and (max-width:769px){
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 2%;
				}
				.rowsss dropdown{
					border-bottom: 1px solid whitesmoke;
				}
				.glyphicon-plus{
					font-size: 14px;
					margin-left: 80%;
				}
			   .rowsss ul{
			   	width: 100%;
			   }
			}
			@media screen and (min-width:769px) and (max-width:869px) {
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 3%;
				}
				.glyphicon-plus{
					font-size: 14px;
					margin-left: 80%;
				}
			}
			
			@media screen and (min-width:870px) and (max-width:970px) {
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 4%;
				}
				.dropdown .dropdown-menu{
					/*display: block;*/
				}
				.glyphicon-plus{
					font-size: 14px;
					margin-left: 80%;
				}
			}
			
			@media screen and (min-width:971px) and (max-width:1071px) {
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 5%;
				}
				.dropdown .dropdown-menu{
					display: block;
				}
				.glyphicon-plus{
					display: none;
				}
			}
			
			@media screen and (min-width:1072px) and (max-width:1172px) {
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 6%;
				}
				.dropdown .dropdown-menu{
					display: block;
				}
				.glyphicon-plus{
					display: none;
				}
			}
			
			@media screen and (min-width:1173px) and (max-width:1673px) {
				.navbar .navbar-collapse .navbar-nav li {
					margin-left: 7%;
				}
				.dropdown .dropdown-menu{
					display: block;
					
				}
				.glyphicon-plus{
					display: none;
				}
			}
		</style>
	</head>

	<body>
		<nav style=" position:relative;" class="navbar container-fluid" role="navigation">
			<div class="row">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="col-lg-1">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="border:none; padding: 3px;margin-top: 15px;">
        <span style="background-color:white" class="sr-only"></span>
        <span style="background-color:white" class="icon-bar"></span>
        <span style="background-color:white" class="icon-bar"></span>
      </button>
					<a class=" navbar-brand glyphicon glyphicon-apple" style="margin-left: 20px;" href="#"></a>
				</div>
				<!--<!--id="bs-example-navbar-collapse-1"控制点击的js事件-->-->
				<div  class=" collapse navbar-collapse navbar-responsive-collapse col-lg-9 " id="bs-example-navbar-collapse-1">
					<ul style=" " class="nav navbar-nav container">
						<li class="active ">
							<a href="#">Mac <span class="sr-only">(current)</span></a>
						</li>
						<li class="lis">
							<a href="#">ipad</a>
						</li>
						<li class="lis">
							<a href="#">iphone</a>
						</li>
						<li class="lis">
							<a href="#">Watch</a>
						</li>
						<li class="lis">
							<a href="#">Music</a>
						</li>
						<li class="lis">
							<a href="#">技术支持</a>
						</li>
						<li class="lis">
							<a href="#" class="glyphicon glyphicon-search"></a>
						</li>
						<!-- <li class="lis type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal""><a href="#" class="glyphicon glyphicon-briefcase"></a></li>-->
						<li>
							<!-- <div class="btn-group">-->
							<a type="" class="dropdown-toggle glyphicon glyphicon-briefcase" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							</a>
							<ul class="dropdown-menu">
								<li class="navbar-default">
									<a href="#">购物袋</a>
								</li>
								<li class="navbar-default">
									<a href="#">收藏</a>
								</li>
								<li class="navbar-default">
									<a href="#">订单</a>
								</li>
								<li class="navbar-default">
									<a href="#">账户</a>
								</li>
								<li role="separator" class="divider"></li>
								<li class="navbar-default" id="load" data-toggle="modal" 								data-target="#myModal" >
									<a href="#" id="change" >登录</a>
								</li>
							</ul>
							<!--</div>-->
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
			<!--<!-模态框-->
			<!-- Modal 1 -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  
				aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" 
								aria-label="Close"><span 
									 aria-hidden="true">&times;</span></button>
							<h3 class="modal-title" id="myModalLabel">购物车</h3>
						</div>
						<div class="modal-body">
							<!--<p class="navbar-default h3">收藏</p>-->
							<!--<p class="h3">订单</p>-->
							<p class="h4">用户名: <input id='yonghu' class="form-control" placeholder="用户名" aria-describedby="basic-addon1"></p>
							<p class="h4">密码:
								<input id="mima" class="form-control" placeholder="密码" aria-describedby="basic-addon1"></p>
						</div>
						<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button class=" btn btn-primary denglu" data-dismiss="modal">登录</button>
						</div>
					</div>
				</div>
			</div>
			<!--成功的莫泰框-->
		
		</nav>
		<!--图片 ：-->
		<main>
			<div class="container-fluid">
				<div class="row rows">
					<div class="col-lg-10">
						<p class="h1 text-center">iphone8</p>
						<p class="h3 text-center">新一代iphone</p>
						<!--第一张大图-->
						<img class="visible-sm visible-md visible-lg" src="https://images.apple.com/v/home/dk/images/tier-one-heroes/iphone-

8/iphone_8_medium.jpg" />
						<!--第一张缩小图-->
						<img class="visible-xs" src="https://images.apple.com/v/home/dk/images/tier-one-heroes/iphone-
8/iphone_8_small.jpg" />
					</div>
					<div class="col-lg-10">
						<p class="h1 text-center">iphoneX</p>
						<p class="h3 text-center">hello,未来</p>
						<!--第二张大图-->
						<img class="visible-sm visible-md visible-lg" src="https://images.apple.com/v/home/dk/images/tier-one-heroes/iphone-

x/iphone_x_medium.jpg" />
						<!--大图缩小图-->
						<img class="visible-xs" src="https://images.apple.com/v/home/dk/images/tier-one-heroes/iphone-

x/iphone_x_small.jpg" />
					</div>
					<div class="col-lg-10">
						<p class="glyphicon glyphicon-apple"><span class="h1">watch</span></p>
						<p class="h3 text-center">更自由，更省电</p>
						<!--手表-->
						<img class="visible-sm visible-md visible-lg" src="https://images.apple.com/cn/home/images/tier-one-heroes/apple-watch/watch_medium.jpg" />
						<!--单个手表-->
						<img class="visible-xs" src="https://images.apple.com/cn/home/images/tier-one-heroes/apple-watch/watch_small.jpg" />
					</div>

				</div>
			</div>
			<div class="container">
				<div class="row rowss">
					<!--变成两列-->
					<div class="col-lg-6 col-md-5 col-xs-10">
						<p class="h1">ios11</p>
						<p class="h3">现已推出</p>
						<img src="https://images.apple.com/cn/home/images/half-width-promos/ios_alt_small.jpg" />
					</div>

					<div class="col-lg-4 col-md-5 col-xs-10">
						<p class="h1">watchOS4</p>
						<p class="h3">现已推出</p>
						<img src="https://images.apple.com/cn/home/images/half-width-promos/watchos_small.jpg" />
					</div>

				</div>
			</div>
			<div class="container">
				<div class="row rowss">
					<!--变成两列-->
					<div class="col-lg-6 col-md-5 col-xs-10">
						<!--style=" background-image: url(https://images.apple.com/cn/home/images/half-width-promos/trade_up_small.jpg);">-->
						<p class="h1">ios11</p>
						<p class="h3">现已推出</p>
						<img style="height: 200px; width: 500px;" src="https://images.apple.com/cn/home/images/half-width-promos/trade_up_small.jpg" />
					</div>

					<div class="col-lg-4 col-md-5 col-xs-10">
						<p class="h1">watchOS4</p>
						<p class="h3">现已推出</p>
						<img  
							src="https://images.apple.com/cn/home/images/half-width-promos/macos_high_sierra_small.jpg" />
					</div>

				</div>
			</div>
		</main>
		<footer class="container">
			<div class="row rowsss">
				<!--///////////////////-->
	<div style="margin-top: 10px;" class="dropdown col-lg-2 col-md-2 col-sm-10 col-xs-10">
  <div class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="glyphicon glyphicon-plus"></span>
  </div>
  <ul style="border: none; background-color: lightgray;" class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
  <hr />
</div>

<!--////////////////////////////////////-->
 <div  style="margin-top: 10px;" class="dropdown col-lg-2 col-md-2 col-sm-10 col-xs-10">
  <div class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
     <span class="glyphicon glyphicon-plus"></span>
  </div>
  <ul style="border: none; background-color: lightgray;" class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
    <hr />
</div>
<!--///////////////////////////////////-->
						<div class="dropdown col-lg-2 col-md-2 col-sm-10 col-xs-10">
  <div style="margin-top: 10px;" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="glyphicon glyphicon-plus"></span>
  </div>
  <ul style="border: none; background-color: lightgray;" class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
    <hr />
</div>
<!--//////////////////-->
					<div class="dropdown col-lg-2 col-md-2 col-sm-10 col-xs-10">
 <div  style="margin-top: 10px;" class="  dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="glyphicon glyphicon-plus"></span>
  </div>
  <ul style="border: none; background-color: lightgray;" class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
    <hr />
</div>
<!--//////////////////////////////-->
<div  style="margin-top: 10px;" class="dropdown col-lg-2 col-md-2 col-sm-10 col-xs-10">
  <div class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="glyphicon glyphicon-plus"></span>
  </div>
  <ul style="border: none; background-color: lightgray;" class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
    <hr />
</div>

			</div>-->

		</footer>
	</body>


</html>